<template>
  <div>
    <!-- 搭配上样推荐配置 -->
    <search-form
      :search-config="searchConfig"
      :label-width="150"
      @search="handleSearch"
    />
    <table-box
      ref="refTable"
      table-size="mini"
      :table-config="tableConfig"
      show-index
      dragable
      :selected-arry.sync="tableSelected"
      :other-filters="otherFilters"
      @btnOperate="btnOperate"
      @selection-change="selectionChangeHandle"
    />
    <div>
      <edit v-if="showAddPage" :visible.sync="showAddPage" @success="refreshTable" />
      <import-files v-if="importVisible" title="导入" :visible.sync="importVisible" :config="fileImportConfig" @success="refreshTable" />
      <export-files v-if="exportVisible" title="导出模板" :config="exportConfig" :visible.sync="exportVisible" />

    </div>
  </div>
</template>

<script>
import edit from './EditDlg.vue'
export default {
  name: 'MatchProduct',
  components: { edit },
  data() {
    return {
      importVisible: false,
      exportVisible: false,
      showAddPage: false,
      tableLoading: false,
      activatedData: {},
      searchConfig: [
        {
          label: '推荐型号',
          prop: 'model',
          type: 'dialog',
          value: '',
          placeholder: '',
          config: {
            requestMethod: 'post',
            remoteUrl: `/select-service/api/v1/productModel/page`,
            defaultProps: {
              label: 'name',
              value: 'name'
            },
            selectData: []
          },
          dialogConfig: {
            title: '推荐型号',
            interfacePath: `/select-service/api/v1/productModel/page`,
            setting: [{ prop: 'code', title: '编码' }, { prop: 'name', title: '名称' }],
            pageFlag: true
          }
        },
        {
          label: '推荐品类',
          prop: 'categoryCode',
          type: 'dialog',
          value: '',
          placeholder: '',
          config: {
            requestMethod: 'post',
            remoteUrl: `/select-service/api/v1/productCategory/page`,
            // paramField: 'keyWord', // 远程搜索参数名
            defaultProps: {
              label: 'name',
              value: 'code'
            },
            selectData: []
          },
          dialogConfig: {
            title: '推荐品类',
            interfacePath: `/select-service/api/v1/productCategory/page`,
            setting: [{ prop: 'code', title: '编码' }, { prop: 'name', title: '名称' },
              { prop: 'parentCode', title: '上级品类编码' }, { prop: 'parentName', title: '上级品类名称' }],
            pageFlag: true
          }
        },
        {
          label: '推荐系列',
          prop: 'seriesCode',
          type: 'dialog',
          value: '',
          placeholder: '',
          config: {
            requestMethod: 'post',
            remoteUrl: `/select-service/api/v1/productSaleSeries/page`,
            // paramField: 'keyWord', // 远程搜索参数名
            defaultProps: {
              label: 'name',
              value: 'code'
            },
            selectData: []
          },
          dialogConfig: {
            title: '推荐系列',
            interfacePath: `/select-service/api/v1/productSaleSeries/page`,
            setting: [{ prop: 'code', title: '编码' }, { prop: 'name', title: '名称' }],
            pageFlag: true
          }
        },
        { label: '产品编码', prop: 'code', type: 'text', value: '', placeholder: '' }
      ],
      tableConfig: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/displayProductCollocation/page`,
        buttonGroupCode: 'default',
        hideSearchBar: true,
        tabIndex: 0,
        pageSize: 10,
        order: 'desc',
        // sort: 'createTime',
        // 表格字段动态配置
        setting: [
          {
            prop: 'model',
            label: '搭配型号',
            minWidth: '140'
          },
          {
            prop: 'categoryName',
            label: '搭配品类',
            minWidth: '140'
          },
          {
            prop: 'seriesName',
            label: '搭配系列',
            minWidth: '140'
          },
          {
            prop: 'code',
            label: '产品编码',
            minWidth: '140'
          }
        ],
        btnList: this.isProduction ? null : [{
          buttonName: '新增',
          outerFlag: true,
          optCode: 'add'
        },
        {
          buttonName: '导入',
          outerFlag: true,
          optCode: 'import'
        }
        // ,
        // {
        //   buttonName: '导出模板',
        //   outerFlag: true,
        //   optCode: 'export'
        // }
        ]
      },
      tableSelected: [],
      otherFilters: []
    }
  },
  computed: {
    exportConfig() {
      return [
        {
          code: 'exportTemplate',
          name: '搭配产品导入模板',
          async: false,
          templateMethod: 'post',
          templateApi: `${process.env.VUE_APP_BASE_API}/api/v1/displayProductCollocation/export/?type=0`
        }
      ]
    },
    fileImportConfig() {
      return [{
        code: 'import',
        name: '搭配产品',
        apiUrl: `${process.env.VUE_APP_BASE_API}/api/v1/displayProductCollocation/importExcel?type=1`,
        selectedRows: this.tableSelected,
        paramsRaw: {},
        filtersRaw: this.otherFilters
      }]
    }
  },
  created() {
  },
  methods: {
    // 搜索
    handleSearch(data) {
      this.otherFilters = data.filtersRaw
      this.$nextTick(() => {
        this.$refs.refTable.initTableData()
      })
    },
    btnOperate(flag) {
      switch (flag) {
        case 'add':
          this.handleEdit(0)
          break
        case 'import':
          this.handleImport()
          break
        case 'export':
          this.handleExport()
          break
        default:
          break
      }
    },
    // 选中行
    selectionChangeHandle(rows) {
      this.tableSelected = rows
    },
    // 新增
    handleEdit() {
      this.showAddPage = true
    },

    // 刷新
    refreshTable(isInit) {
      this.$refs.refTable.initTableData(isInit ? '' : 'onPage')
    },
    // 导入
    handleImport() {
      this.importVisible = true
    },
    handleExport() {
      this.exportVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
